<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>颜色赋值</title>
    <style>
      /*
      16进制赋值方式
       */
      #p1 {
        background-color: #ff0000;
      }
      #p1a {
        background-color: #ff000088;/*半透明*/
      }
      /*RGB赋值方式*/
      #p2 {
        background-color: rgb(0, 255, 0);
      }
      #p2a {
        background-color: rgba(0, 255, 0, 0.5);
      }
      /*预定义颜色*/
      #p3 {
        background-color: blue;
      }
      /*currentColor关键字*/
      #p4 {
          color: darkblue;
          border: 10px solid currentColor;
      }
      #p5 {
          color: gold;
          border: 10px solid currentColor;
      }
    </style>
</head>
<body>
  <p id="p1">Red</p>
  <p id="p1a">Red transparency</p>
  <p id="p2">Green</p>
  <p id="p2a">Green transparency</p>
  <p id="p3">Blue</p>
  <p id="p4">DarkBlue</p>
  <p id="p5">Gold</p>
</body>
</html>